<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="my" uri="http://amani.com/function-taglib"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@ include file="../shared/common_header.jsp"%>
<title>VIP预约</title>
</head>
<body>
	<section id="orders" class='step3'>
	<form action="${ROOT_PATH }Orders/Step4" name="step3Form"
		id="step3Form" method="post">
		<input name="openid" id="openid" type="hidden" value="${openid }" />
		<input name="ordersFactProject" id="ordersFactProject" type="hidden"
			value="${ordersFactProject }" /> <input name="staffno" id="staffno"
			type="hidden" value="${staffno }" /> <input name="orderDate"
			id="orderDate" type="hidden" value="" /> <input name="companyno"
			id="companyno" type="hidden" value="${companyno }" /> <input
			name="ycoordinate" id="ycoordinate" type="hidden"
			value="${ycoordinate }" /> <input name="xcoordinate"
			id="xcoordinate" type="hidden" value="${xcoordinate }" /> <input
			name="price" id="price" value="${price }" type="hidden" /> <input
			name="sourceType" id="sourceType" value="${sourceType }"
			type="hidden" /> <input name="cardid" id="cardid" value="${cardid }"
			type="hidden" /> <input name="projectno" id="projectno"
			value="${projectno }" type="hidden" /> <input name="projectname"
			id="projectname" value="${projectname }" type="hidden" />
	</form>
	<nav class="bar bar-tab"> <a class="tab-item active" rel="today"
		href="#" rel="serviced"> <span class="tab-label">今天</span>
	</a> <a class="tab-item " href="#" rel="tomorrow"
		style="border-left: 0px; border-right: 0px"> <span
		class="tab-label">明天</span>
	</a> <a class="tab-item" href="#" rel="other"> <span class="tab-label">其他</span>
	</a> </nav>

	<div class="content">
		<div class="today">
			<span><a href='javascript:;'>10:00</a></span> <span><a
				href='javascript:;'>10:40</a></span> <span><a href='javascript:;'>11:20</a></span>
			<span><a href='javascript:;'>12:00</a></span> <span><a
				href='javascript:;'>12:40</a></span> <span><a href='javascript:;'>13:20</a></span>
			<span><a href='javascript:;'>14:00</a></span> <span><a
				href='javascript:;'>14:40</a></span> <span><a href='javascript:;'>15:20</a></span>
			<span><a href='javascript:;'>16:00</a></span> <span><a
				href='javascript:;'>16:40</a></span> <span><a href='javascript:;'>17:20</a></span>
			<span><a href='javascript:;'>18:00</a></span> <span><a
				href='javascript:;'>18:40</a></span> <span><a href='javascript:;'>19:20</a></span>
			<span><a href='javascript:;'>20:00</a></span> <span><a
				href='javascript:;'>20:40</a></span>
			<div class="clear"></div>
		</div>
		<div class="tomorrow">
			<span><a href='javascript:;'>10:00</a></span> <span><a
				href='javascript:;'>10:40</a></span> <span><a href='javascript:;'>11:20</a></span>
			<span><a href='javascript:;'>12:00</a></span> <span><a
				href='javascript:;'>12:40</a></span> <span><a href='javascript:;'>13:20</a></span>
			<span><a href='javascript:;'>14:00</a></span> <span><a
				href='javascript:;'>14:40</a></span> <span><a href='javascript:;'>15:20</a></span>
			<span><a href='javascript:;'>16:00</a></span> <span><a
				href='javascript:;'>16:40</a></span> <span><a href='javascript:;'>17:20</a></span>
			<span><a href='javascript:;'>18:00</a></span> <span><a
				href='javascript:;'>18:40</a></span> <span><a href='javascript:;'>19:20</a></span>
			<span><a href='javascript:;'>20:00</a></span> <span><a
				href='javascript:;'>20:40</a></span>
			<div class="clear"></div>
		</div>
		<div class="other">
			<span><a href='javascript:;' id="other1" value="">1</a></span> <span><a
				href='javascript:;' id="other2">2</a></span> <span><a
				href='javascript:;' id="other3">3</a></span> <span><a
				href='javascript:;' id="other4">4</a></span> <span><a
				href='javascript:;' id="other5">5</a></span> <span><a
				href='javascript:;' id="other6">6</a></span> <span><a
				href='javascript:;' id="other7">7</a></span> <span><a
				href='javascript:;' id="other8">8</a></span>
			<div class="clear"></div>
		</div>
	</div>
	</section>

	<script type="text/javascript">
		$(function() {
			
			var formartDate = function(date) {
				var month = date.getMonth() < 9 ? "0" + (date.getMonth() + 1)
						: (date.getMonth() + 1);
				var date1 = date.getDate() < 10 ? "0" + (date.getDate())
						: (date.getDate());
				return date.getFullYear() + '/' + month + '/' + date1;
			};
			(function initPage() {
				//初始化当前页面，默认显示第一天的数据 
				$('.today').show();
				$('.tomorrow').hide();
				$('.other').hide();
				var date1 = new Date(Date.now() + 24 * 60 * 60 * 1000);
				$('#other1').text(date1.toLocaleDateString());
				$('#other1').text(formartDate(date1));

				var date2 = new Date(Date.now() + 2 * 24 * 60 * 60 * 1000);
				$('#other2').text(date2.toLocaleDateString());
				$('#other2').text(formartDate(date2));

				var date3 = new Date(Date.now() + 3 * 24 * 60 * 60 * 1000);
				$('#other3').text(date3.toLocaleDateString());
				$('#other3').text(formartDate(date3));

				var date4 = new Date(Date.now() + 4 * 24 * 60 * 60 * 1000);
				$('#other4').text(date4.toLocaleDateString());
				$('#other4').text(formartDate(date4));

				var date5 = new Date(Date.now() + 5 * 24 * 60 * 60 * 1000);
				$('#other5').text(date5.toLocaleDateString());
				$('#other5').text(formartDate(date5));

				var date6 = new Date(Date.now() + 6 * 24 * 60 * 60 * 1000);
				$('#other6').text(date6.toLocaleDateString());
				$('#other6').text(formartDate(date6));

				var date7 = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000);
				$('#other7').text(date7.toLocaleDateString());
				$('#other7').text(formartDate(date7));

				var date8 = new Date(Date.now() + 8 * 24 * 60 * 60 * 1000);
				$('#other8').text(date8.toLocaleDateString());
				$('#other8').text(formartDate(date8));
				$(".today a").each(function(){
					var otherDate = formartDate(new Date(Date.now()));
					var time = $(this).html();
					
					now = new Date().getTime();
					dateTime = new Date(otherDate + ' ' + time).getTime();
					//alert((now+"|"+ dateTime)+(now>dateTime));
					if(now+1800000>dateTime){
						$(this).addClass("overdue");
						$(this).css({"color":"RGB(48,48,48)","border-color":"RGB(48,48,48)"});
					}
				})
			})();

			//数据提交方法
			var commitData = function() {
				$("#step3Form").submit();
			};
			var otherDate = formartDate(new Date(Date.now()));

			$('.tab-item').click(function() {
				var obj = $(this), type = obj.attr('rel');
				obj.addClass('active').siblings().removeClass('active');
				$('.' + type).show().siblings().hide();
				if (type == 'today') {
					var dd = new Date(Date.now());
					otherDate = formartDate(dd);
				} else if (type == 'tomorrow') {
					var dd = new Date(Date.now() + 24 * 60 * 60 * 1000);
					otherDate = formartDate(dd);
				} else if (type == 'other') {
					otherDate = ""
				}
			});
			$('.today a, .tomorrow a').click(function() {
				if(this.className == 'overdue')
					return;
				var time = $(this).html();
				
				$('#orderDate').val(new Date(otherDate + ' ' + time).getTime());
				commitData();
			});
			$('.other a').click(function() {
				otherDate = $(this).text();
				var parent = $(this).parents('.other');
				parent.hide();
				parent.prev().show();
			});
		})
	</script>

</body>
</html>